<template>
	<view>
		<view style="background-image: url('/static/完成作业.png');background-size: cover;height: 60px;width: 90%;margin-left: 5%;
		display: flex;flex-direction: column;justify-content: space-around;margin-top: 20px;">
			<span style="font-size: larger;font-weight: bolder;color: white;margin-left: 10%;
			text-shadow:2px 2px 5px black;">{{ '数学' }}</span>
			<up-tag type="warning" style="margin-left: 10%;" size="mini">待完成</up-tag>
		</view>
		<view>
			<up-collapse border="false" style="width: 90%;margin-left: 5%;">
				<up-collapse-item name="Docs guide" border="false">
					<template #title>
						<text style="font-weight: bolder;font-size: larger;">任务内容</text>
					</template>
					<image src="/static/1.png"></image>
				</up-collapse-item>
			</up-collapse>
		</view>
		<view style="width: 90%;margin-left: 10%;">
			<span style="font-weight: bolder;font-size: larger;">作业内容</span>
			<up-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="10" accept="image" capture="camera"
				style="margin-top: 10%;;border: 1px dashed gray;width: 100px;height: 100px;display: flex;justify-content: center;align-items: center;border-radius: 5px;">
				<template #trigger>
					<view style="text-align: center;display: flex;justify-content: space-around;align-items: center;flex-direction: column;margin-top: 30px;height: 70px;">
						<image src="/static/shang.png" style="width: 20px;height: 20px;"></image>
						<span style="font-size: smaller;color: darkgray;">上传图片/视频</span>
					</view>
				</template>
			</up-upload>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const fileList1 = ref([]);

	// 删除图片
	const deletePic = (event) => {
		fileList1.value.splice(event.index, 1);
	};

	// 新增图片
	const afterRead = async (event) => {
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file);
		let fileListLen = fileList1.value.length;
		lists.map((item) => {
			fileList1.value.push({
				...item,
			});
		});
		for (let i = 0; i < lists.length; i++) {
			const result = await uploadFilePromise(lists[i].url);
			let item = fileList1.value[fileListLen];
			fileList1.value.splice(fileListLen, 1, {
				...item,
				status: 'success',
				message: '',
				url: result,
			});
			fileListLen++;
		}
	};

	const uploadFilePromise = (url) => {
		return new Promise((resolve, reject) => {
			let a = uni.uploadFile({
				url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
				filePath: url,
				name: 'file',
				formData: {
					user: 'test',
				},
				success: (res) => {
					setTimeout(() => {
						resolve(res.data.data);
					}, 1000);
				},
			});
		});
	};
</script>

<style>

</style>